<!doctype html>
<html>
<head>
	<title>凯龙的个人展示网页</title>
	<meta charset="utf-8" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/garden.js"></script>
    <script type="text/javascript" src="js/functions.js"></script>
	<script type="text/javascript" src="js/jq.snow.js"></script>
	<link href="css/mian.css"  rel="stylesheet" type="text/css">
	<link rel="shortcut icon" href="images/x_icon.png" />
</head>
<body>
	<div class="web_bg">
		<img id="im_b" src="images/bg3.jpg">
	</div>
	<div class="left_tab">
		<li><img src="images/big01.png"></li>
		<li><img src="images/big02.png"></li>
		<li><img src="images/big03.png"></li>
		<li><img src="images/big04.png"></li>
		<li><img src="images/big05.png"></li>
		<li><img src="images/big06.png"></li>
	</div>
	<div class="yin_tab" id="y_tab">
		<ul>
			<li><img src="images/big1.png"><span>我的网盘</span></li>
			<li><a href="tuce.html"><img src="images/big2.png"></a><span>QQ</span></a></li>
			<li><a href="http://user.qzone.qq.com/978161562/infocenter?ptsig=2pnMm9690eRENTRepEvC9YV8QEddWt8tCNz0UfzMjs8_" target="_blank"><img src="images/big3.png"><span>QQ空间</span></a></li>
			<li><a href="donghua.html"><img src="images/big4.png"><span>七夕主题</span></a></li>
			<li id="ddz"><img src="images/d_big_11.png"><span>斗地主</span></li>
			<div class="clearfix"></div>
		</ul>
		<ul>
			<li><img src="images/d_big_41.png"><span>我的小说</span></li>
			<li><img src="images/d_big_42.png"><span>星星新闻</span></li>
			<li><img src="images/d_big_43.png"><span>凯龙音乐</span></li>
			<li><img src="images/d_big_44.png"><span>腾讯TV</span></li>
			<li><img src="images/d_big_45.png"><span>乐视TV</span></li>
			<div class="clearfix"></div>
		</ul>
		<ul>
			<li><img src="images/d_big_51.png"><span>四叶草</span></li>
			<li><img src="images/d_big_52.png"><span>聊天记录</span></li>
			<li><img src="images/d_big_53.png"><span>通讯录</span></li>
			<li><img src="images/d_big_54.png"><span>默默无闻</span></li>
			<li><img src="images/d_big_55.png"><span>加减乘除</span></li>
			<div class="clearfix"></div>
		</ul>
		<ul>
			<li><img src="images/big5.png"><span>微博</span></li>
			<li><img src="images/d_big_12.png"><span>3366小游戏</span></li>
			<li><img src="images/d_big_13.png"><span>爱心小屋</span></li>
			<li><img src="images/d_big_14.png"><span>芒果屋</span></li>
			<li><img src="images/d_big_15.png"><span>团购</span></li>
			<div class="clearfix"></div>
		</ul>
	</div>
		
	<div class="mianban" id="mianban">
		<div class="mian_top">
			凯龙
			<span id="close"></span>
			<span id="big"></span>
			<span id="list"></span>
		</div>
		<div class="zhu_t">
			<iframe src="http://web.3366.com/ddz/"></iframe>
		</div>
	</div>
	
	<div id="suoxiao">
		<span></span>
		<span id="f_big"></span>
		<span id="cls"></span>
	</div>
	<div class="top_tab">
		<div class="user">
			<img src="images/user.jpg">
		</div>
		<ul id="clu">
			<li class="numbe1">1</li>
			<li class="numbe2">2</li>
			<li class="numbe3">3</li>
			<li class="numbe4">4</li>
			<li class="numbe5">5</li>
			<div class="clearfix"></div>
		</ul>
	</div>
	<div class="bottom_tab" id="b_tab">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
	<!--雪花-->
	<script>
	$(function(){
		$.fn.snow({ 
			minSize: 5,		//雪花的最小尺寸
			maxSize: 50, 	//雪花的最大尺寸
			newOn: 150		//雪花出现的频率 这个数值越小雪花越多
		});
	});
	</script>
	<div id="mainDiv">
		<div id="content">
			<div id="code">
				<span class="comments">/**</span><br />
        <span class="space"/><span class="comments">* Haihai：今天是2016年8月9日。</span><br />
        <span class="space"/><span class="comments">* 我写这个网站来庆祝这个特殊的日子。 </span><br />
        <span class="space"/><span class="comments">* 虽然，我不是一个很擅长表达言语的人。 </span><br />
        <span class="space"/><span class="comments">* 但我希望我们能记住我们在一起的每一刻。</span><br />
				<span class="space"/><span class="comments">*/</span><br />
				Girl u = <span class="keyword">new</span> Girl(<span class="string">"Haihai"</span>);<br/>
				Boy i = <span class="keyword">new</span> Boy(<span class="string">"Kailong"</span>);<br />
				<span class="comments">// 今天是七月七。 </span><br />
				<span class="comments">// 祝海海情人节快乐。</span><br />
				<span class="comments">// 我把你的美丽记录在日记里，让文字把你的青春铭记。</span><br />
        <span class="comments">// 我把你的笑容粘贴在日记里，让图片把你的活泼记忆。</span><br />
				<span class="comments">// 我把我的照片夹进日记里，让爱情把你的幸福牢系。</span><br />
				<span class="comments">// 对我来说是个重要的时刻，我发现我已经深深爱上了你！</span><br />
        <span class="comments">// 当我凝视你的眼，当我听到你的声音。 </span><br />
				<span class="comments">// 当我闻到你秀发上淡淡的清香。 </span><br />
        <span class="comments">//  </span><br />
				我爱你;<br />
				<span class="comments">//当我感受到我剧烈的心跳，我明白了：</span><br />
				我想你;<br />
				<span class="comments">// 你在我心中最美。 </span><br />
				我想照顾你 <br />
				<span class="comments">// 你是我今生的唯一！</span><br />
				<span class="comments">// 所以我继续等待，我有信心，你会。</span><br />
				<span class="keyword">我会</span> 永远  <span class="keyword">爱你</span>;<br />
				<span class="keyword">一直</span> 爱你 <br />
				<span class="placeholder"/>我有一颗永远不变的心<br />
				<span class="placeholder"/><span class="comments">// 我认为这是一个重要的决定。</span><br />
				<span class="placeholder"/><span class="comments">// 你可以在任何时候决定。</span><br />
				<span class="placeholder"/>爱你 = 想你<br /><br />
				我非常高兴能认识你<br />
			</div>
			<div id="loveHeart">
				<canvas id="garden"></canvas>
				<div id="words">
					<div id="messages">
						        Haihai,我已经相爱了：
						<div id="elapseClock"></div>
					</div>
					<div id="loveu">
						<div class="signature">--送给我的挚爱--海海</div>
					</div>
				</div>


				     </div>
				</div>
			</div>
</div>
</div>

	<script type="text/javascript">
		var offsetX = $("#loveHeart").width() / 2;
		var offsetY = $("#loveHeart").height() / 2 - 55;
		var together = new Date();
		together.setFullYear(2013, 01, -32);
		together.setHours(00);
		together.setMinutes(0);
		together.setSeconds(0);
		together.setMilliseconds(0);
		
		if (!document.createElement('canvas').getContext) {
			var msg = document.createElement("div");
			msg.id = "errorMsg";
			msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+"; 
			document.body.appendChild(msg);
			$("#code").css("display", "none")
			$("#copyright").css("position", "absolute");
			$("#copyright").css("bottom", "10px");
		    document.execCommand("stop");
		} else {
			setTimeout(function () {
				startHeartAnimation();
			}, 5000);

			timeElapse(together);
			setInterval(function () {
				timeElapse(together);
			}, 500);

			adjustCodePosition();
			$("#code").typewriter();
		}
	</script>
	<script>
		//顶部切换
			var ali = document.getElementById("clu");
				arr = ["images/bg3.jpg","images/bg2.jpg","images/bg1.jpg","images/bg4.jpg","images/bg5.jpg"];
				bg = document.getElementById("im_b");
				
			ali.addEventListener('click',function(e){
				var lis = e.target.parentElement.children;
				for(var i = 0;i < lis.length;i++){
					if(lis[i] != e.target){
						lis[i].style.background = 'none';
					}else{
						//console.dir(lis[i]);
						lis[i].style.background = 'url(images/ico.png) no-repeat';
						bg.src = arr[i];
					}
				}
			});
			//底部切换
			var abt = document.getElementById("b_tab");
				ytb = document.getElementById("y_tab").getElementsByTagName("ul");
				//console.dir(ytb);
			abt.addEventListener('click',function(e){
				var spn = e.target.parentElement.children;
				for(var i=0;i<spn.length;i++){
					if(spn[i] != e.target){
						spn[i].style.background = 'rgba(255,255,255,0.5)';
						ytb[i].style.display = 'none';
						//console.dir(ytb[i]);
						//console.log("yes");
					}else{
						spn[i].style.background = 'rgba(0,0,0,0.5)';
						ytb[i].style.display = 'block';
						//console.log("no");
					}
				}
			});
			//中间面板控制
			//主面板缩小
			document.getElementById("list").addEventListener('click', function (e) {
				document.getElementById("mianban").style.display = 'none';
				document.getElementById("suoxiao").style.display = 'block';
			});
			//主面板放大
			document.getElementById("big").addEventListener('click', function () {
				document.getElementById("mianban").style.width = '100%';
				document.getElementById("mianban").style.height = '100%';
				document.getElementById("mianban").style.top = '0';
				document.getElementById("mianban").style.left = '0';
				document.getElementById("mianban").style.margin = '0';
			});
			//主面板关闭
			document.getElementById("close").addEventListener('click', function (e) {
				document.getElementById("mianban").style.display = 'none';
			});
			//缩小窗口的关闭
			document.getElementById("cls").addEventListener('click', function (e) {
				document.getElementById("suoxiao").style.display = 'none';
			});
			//缩小窗口的放大
			document.getElementById("f_big").addEventListener('click', function () {
				document.getElementById("mianban").style.display = 'block';
				document.getElementById("mianban").style.width = '100%';
				document.getElementById("mianban").style.height = '100%';
				document.getElementById("mianban").style.top = '0';
				document.getElementById("mianban").style.left = '0';
				document.getElementById("mianban").style.margin = '0';
				document.getElementById("suoxiao").style.display = 'none';
			});
			//主面板的显示
			document.getElementById("ddz").addEventListener('click', function (e) {
				document.getElementById("mianban").style.display = 'block';
			});
			;(function(win){
				win.KL = function(id){
					return new _$(id);
				}
				function _$(id){
					this.ele = document.getElementById(id);
				}
				_$.prototype = {
					constructor:_$,
					css:function(z){
						for(var i in z){
							this.ele.style.i = z[i];
						}
					}
				}
			})(window);
			console.dir(KL('f_big'));
			document.getElementById('f_big').addEventListener('click',function(){
				console.dir(KL('mianban'));
				KL('mianban').css({
					dislay:'block',
					width:'100%',
					height:'100%',
					top:0,
					left:0,
					margin:0,
				});
				KL('suoxiao').css({
					display:'none'
				})
			})
	</script>
</body>
</html>